<template>
  <a-checkbox-group v-if="type=='checkbox'" @change="onChange" :value="arrayValue" :disabled="disabled">
    <a-checkbox v-for="(item, key) in dictOptions" :key="key" :value="item.itemValue">{{  item.label || item.itemText }}</a-checkbox>
  </a-checkbox-group>

  <a-select
    v-else-if="type==='select'"
    allowClear
    mode="multiple"
    :value="arrayValue"
    :disabled="disabled"
    :placeholder="placeholder"
    :getPopupContainer="getPopupContainerFn"
    :filterOption="filterOption"
    @change="onChange"
  >
    <a-select-option
      v-for="(item,index) in dictOptions"
      :key="index"
      :value="item.itemValue">
      <!-- <span class="w-full inline-block" :title=" item.itemText || item.label "> -->
        {{ item.itemText || item.label }}
      <!-- </span> -->
    </a-select-option>
  </a-select>

</template>

<script>
import { initDictOptions } from './ZDictSelectUtil'
export default {
  name: 'ZMultiSelectTag',
  props: {
    dictCode: String,
    placeholder: String,
    disabled: Boolean,
    value: String,
    type: {
      type: String,
      default: () => 'select' // select || checkbox
    },
    options: Array, // [{label:'',value:''}]
    defaultValue: Boolean,
    getPopupContainer: {
      type: Function,
      default: () => document.body
    },
    popupContainer: String // 自定义属性，方便设置下拉框popupContainer属性
  },
  data() {
    return {
      dictOptions: [],
      arrayValue: !this.value ? [] : this.value.split(',')
    }
  },
  watch: {
    options: {
      handler() {
        this.setCurrentDictOptions()
      },
      deep: true
    },
    dictCode: {
      immediate: true,
      handler() {
        this.initDictData()
      }
    },
    value(val) {
      if (!val) {
        this.arrayValue = []
      } else {
        this.arrayValue = this.value.split(',')
      }
    }
  },
  methods: {
    initDictData() {
      if (this.options && this.options.length > 0) {
        this.dictOptions = this.getOptions(this.options)
      } else {
        // 根据字典Code, 初始化字典数组
        initDictOptions(this.dictCode).then(res => {
          if (res.success && res.result) {
            this.dictOptions = res.result.items
            if (!this.value && this.defaultValue) this.handleInput(res.result.dictDefaultValue)
          }
        })
      }
    },
    onChange(selectedValue) {
      this.$emit('change', selectedValue.join(','))
    },
    setCurrentDictOptions(dictOptions) {
      this.dictOptions = this.getOptions(dictOptions)
    },
    getOptions(list) {
      const options = []
      list.forEach(item => {
        options.push({
          itemText: item.label || item.itemText,
          itemValue: item.value || item.itemValue
        })
      })
      return options
    },
    getCurrentDictOptions() {
      return this.dictOptions
    },
    getPopupContainerFn(node) {
      if (this.popupContainer === 'body') {
        return document.body
      } else if (this.popupContainer === 'parent') {
        return node.parentNode
      }
      return this.getPopupContainer(node)
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
